<template>
  <el-form-item v-bind="elFormItemAttr">
    <slot>
      <el-date-picker
        v-if="componentId == 'el-date-picker'"
        v-model="elInputModel"
        v-bind="elInputAttr"
        v-on="elInputOn"
      ></el-date-picker>
      <component :is="componentId" v-model="elInputModel" v-bind="elInputAttr" v-on="elInputOn" v-else>
        <template v-if="componentTag == 'select'">
          <el-option
            v-for="(item, index) in options.options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </template>
        <template v-else-if="componentTag == 'radio-group'">
          <el-radio
            v-for="(item, index) in options.options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-radio
          >
        </template>
        <template v-else-if="componentTag == 'checkbox-group'">
          <el-checkbox
            v-for="(item, index) in options.options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-checkbox
          >
        </template>
        <template v-else-if="componentTag == 'checkbox'">{{ options.text }}</template>
      </component>
      <span :class="['at-form-item-tips', options.tipsClass]" v-if="options.tips">{{ options.tips }}</span>
    </slot>
  </el-form-item>
</template>

<script>
import { kebabCase, camelCase } from 'lodash-es'

export default {
  name: 'JaxFormItem',
  props: {
    modelValue: null,
    options: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      elInputModel: null,
    }
  },
  created() {
    this.getElInputModel()
  },
  computed: {
    componentTag() {
      return kebabCase(this.options.type)
    },
    componentId() {
      const componentsKey = camelCase(this.componentTag)

      const components = {
        input: 'el-input',
        select: 'el-select',
        radio: 'el-radio',
        checkbox: 'el-checkbox',
        switch: 'el-switch',
        upload: 'jax-upload',
        uploadImage: 'jax-upload',
        uploadImages: 'jax-upload',
        uploadFile: 'jax-upload',
        uploadFiles: 'jax-upload',
        uploadVideo: 'jax-upload',
        radioGroup: 'el-radio-group',
        checkboxGroup: 'el-checkbox-group',
        inputNumber: 'el-input-number',
        datePicker: 'el-date-picker',
        datetime: 'el-date-picker',
        timePicker: 'el-time-picker',
      }

      return components[componentsKey] || 'el-input'
    },

    // 饿了么表单规则
    elFormItemRules() {
      const { label, name, formItem, required } = this.options
      const title = label || name

      let rules = [
        // ...this.rules,
        // { required: true, message: '菜单不能为空', trigger: 'blur' },
      ]

      if (this.options.rules) rules = [...rules, ...this.options.rules]

      if (required) {
        rules.push({
          required: true,
          message: `${title}不能为空`,
          trigger: 'blur',
        })
      }

      return rules
    },
    // 饿了么表单选项属性
    elFormItemAttr() {
      const { label, prop, name, formItem, type } = this.options

      let attr = {
        label,
        prop: prop || name,
        rules: this.elFormItemRules,
      }

      if (formItem) {
        attr = {
          ...attr,
          ...formItem,
        }
      }

      return attr
    },
    elInputOn() {
      const { inputOn } = this.options

      return inputOn || {}
    },
    // 饿了么input宽属性
    elInputAttr() {
      const { inputAttr, placeholder } = this.options

      const type = camelCase(this.options.type) || 'input'

      let attr = {
        clearable: true,
        // size: 'small',
        placeholder,
      }

      if (['input', 'search'].includes(type)) {
        attr.maxlength = 128
      }

      if (type == 'search') {
        attr['prefix-icon'] = 'search'
      } else if (type == 'password') {
        attr = {
          type: 'password',
          // maxlength: 12,
          // minlength: 6,
          ...attr,
        }
      } else if (type == 'textarea') {
        attr = {
          type: 'textarea',
          rows: 4,
          maxlength: 256,
          ...attr,
        }
      } else if (type == 'select') {
        if (!attr.placeholder) attr.placeholder = '请选择'
      } else if (type == 'radio') {
      } else if (type == 'uploadImages') {
        attr.type = 'images'
      } else if (type == 'uploadVideo') {
        attr.type = 'video'
      } else if (type == 'uploadFile') {
        attr.type = 'file'
      } else if (type == 'number') {
        attr.type = 'number'
      } else if (type == 'datetime') {
        attr.type = 'datetime'
        // attr['format'] = 'YYYY-MM-DD HH:mm:ss' // 标签
        // attr['value-format'] = 'YYYY-MM-DD HH:mm:ss' // 值
      }

      if (inputAttr) {
        attr = {
          ...attr,
          ...inputAttr,
        }
      }

      return attr
    },
  },
  watch: {
    elInputModel(val) {
      this.$emit('update:modelValue', val)
    },
    modelValue() {
      this.getElInputModel()
    },
  },
  methods: {
    getElInputModel() {
      this.elInputModel = this.modelValue
    },
  },
}
</script>

<style lang="scss" scoped></style>
